<template>
    <div class="menu-tree">
        <el-tree
                class="tree-border"
                :data="categoryList"
                show-checkbox
                default-expand-all
                ref="tree"
                node-key="id"
                :check-strictly="true"
                empty-text="暂无数据"
                :props="defaultProps"
                :default-checked-keys="list"
                :check-on-click-node="true"
        >
        </el-tree>
    </div>
</template>
<script>
    import XEUtils from "xe-utils";
    import category from "@/api/onlineRepair/category/index"

    export default {
        name: "CenterCategory",
        props:["value"],
        data() {
            return {
                listVisible: false,
                defaultProps: {
                    children: "children",
                    label: "name"
                },
                categoryList: []
            }
        },
        computed:{
          list:{
              get(){
                  this.$nextTick(() => {
                      if (this.$refs["tree"]) this.$refs["tree"].setCheckedKeys(this.value)
                  })
                  return this.value
              },
              set(v){
                  this.$emit("input",v)
              }
          }
        },
        created() {
            this.getCategoryList()
        },
        methods: {
            getCategoryList() {
                category.getList().then(res => {
                    this.categoryList = XEUtils.toArrayTree(res.data, {
                        strict: true,
                        parentKey: 'parent',
                        key: 'id',
                        children: 'children'
                    });
                })
            },
            getCheckedList() {
                return this.$refs["tree"].getCheckedKeys()
            }
        }
    }
</script>
